@charset "UTF-8";

@import "displaFlex";



@safeWidth:1100px;        //安全宽度

@safeMainColor:#01cbe9;       //主题颜色
@safeMinorColor:#ff6f6e;       //主题颜色

@borderColor:#dcdcdc;     //边框颜色
@25mainWordColor:#252525;   //文字主体颜色
@4aviceWordColor:#4a4a4a;   //文字副级颜色
@99minorWordColor:#999999;  //文字次要颜色


.w_h(@w_h){
  width: @w_h ;
  height: @w_h ;
}

//文字溢出
//多行
.wordSpaceClamp(@number){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:@number;
  overflow: hidden;
}
//单行
.wordSpaceClamp{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.hover(@color){
  &:hover{
    background-color: @color;
    color: #FFFFFF;
    text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    transition: all 1s cubic-bezier(0, 0.72, 0.35, 1.12);
  }
}




nav{
  border-bottom: 1px solid @borderColor;
}

//面包屑导航
.nav{
  width: @safeWidth;
  margin:20px auto;
  a{
    font-size: 16px;
    color: #4a4a4a;
  }
  :nth-child(1){
    padding-right: 15px;
    background: url("../publicImg/jiantou-you-hui@2x.png") no-repeat right;
    background-size: 6px 11px;
    margin-right: 10px;
  }
  :nth-child(2){
    padding-right: 15px;
    background: url("../publicImg/jiantou-you-hui@2x.png") no-repeat right;
    background-size: 6px 11px;
    margin-right: 10px;
  }

}


.group{
  position: relative;
  &:after{
    content: '';
    width: 100%;
    border-bottom: 2px solid @safeMainColor;
    position: absolute;
    left: 0;
    bottom: -10px;
  }
}
main{
  width: @safeWidth;
  margin:0 auto;
  .displayFlex;
  .flex-direction-column;
  .topNav{
    .displayFlex;
    .flex-direction-row;
    .flex-align-items;
    margin-top: 40px;
    margin-bottom: 30px;
    .title{
       font-size: 24px;
      color: @25mainWordColor;
      margin-right:30px;

    }
    .groupName{
      padding: 0 12px;
      height: 24px;
      color: @25mainWordColor;
      border: 1px solid @safeMinorColor;
      border-radius: 4px;
      font-size:14px;
      background: url("../publicImg/jiantou-xia-hui@2x.png") no-repeat;
      background-position-y: center;
      background-position-x: 130px;
      position: relative;
      display: block;
      text-align: center;
      cursor: pointer;
    }

    position: relative;
    .groupList{
      .displayFlex;
      .flex-direction-row;
      .flex-wrap;
      max-width: 650px;
      max-height: 200px;
      overflow-y: scroll;
      overflow-x: hidden;
      border-radius: 4px;
      border:1px solid @99minorWordColor;

      padding: 20px 12px 30px;

      position: absolute;
      top: 33px;
      left: 77px;
      background: white;
      z-index: 10002;

      span{
        font-size: 16px;
        color:@25mainWordColor;
        width: 150px;
        line-height: 50px;
        cursor: pointer;
        border-radius: 4px;
        .hover(@99minorWordColor);
        text-align: center;
      }

    }



  }
  .innerText{
    .displayFlex;
    .flex-direction-row;

    .sendPostBox{
      width: 760px;
      .toolbar{
        border:1px solid @borderColor;
        border-radius: 4px;
      }
      .text{
        border:1px solid @borderColor;
        border-radius: 4px;
        min-height: 500px;
        margin-bottom: 50px;
      }
      .sendPost{
        border: 1px solid @safeMinorColor;
        color: @safeMinorColor;
        width: 200px;
        height: 60px;
        .hover(@safeMinorColor);
        border-radius: 6px;
        margin-bottom: 50px;
      }
    }
    .rightBox{

      .displayFlex;
      .flex-direction-column;
      .rightNewProduct{
        width: 290px;
        height: 715px;
        margin-left: 30px;
        border: 1px solid @borderColor;
        border-radius: 6px;
        padding: 0 10px;
        .toNewLoans{
          display: block;
          height: 50px;
          width: 100%;
          font-size: 24px;
          line-height: 50px;
          text-align: left;
          background: white url("../publicImg/jiantou-you-lan@2x.png") no-repeat right;
          background-size: 10px 17px;
          border-bottom: 1px solid #eeeeee;
          color: @25mainWordColor;
          margin-bottom: 37px;

        }

        .NewLoansProductList{

          .loansItem{
            .displayFlex;
            .flex-align-items;
            .flex-direction-row;
            margin-bottom: 30px;
            .loansLogo{
              display: block;

              .w_h(72px);
              border-radius: 6px;


            }
            .loanInfo{
              .displayFlex;
              .flex-align-items;
              .flex-direction-row;
              .flex-justify-between;
              width: 210px;
              margin-left: 10px;

              .loanInfoLeft{
                h3{
                  font-size: 18px;
                  color: @25mainWordColor;
                  line-height: 35px;
                  font-weight: normal;
                }
                p{
                  font-size: 14px;
                  color: @4aviceWordColor;
                  i{
                    color: @safeMinorColor;
                  }
                }
              }
              .loanInfoRight{
                p{
                  font-size: 16px;
                  color: @99minorWordColor;
                  margin-bottom: 15px;
                }
                a{
                  display: block;
                  width:58px ;
                  height: 36px;
                  color: white;
                  background-color: @safeMinorColor;
                  text-align: center;
                  line-height: 36px;
                  border-radius: 6px;
                  margin-top: 36px;
                  font-size: 18px;
                }
              }




            }

          }
        }

      }
    }

  }



  input::-webkit-input-placeholder{
    color:@99minorWordColor;
  }
  input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:@99minorWordColor;
  }
  input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:@99minorWordColor;
  }
  input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:@99minorWordColor;
  }



}